<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>动漫</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap/css/style.css">
    <link rel="stylesheet" href="../bootstrap/css/font-awesome(1).css">
    <link rel="stylesheet" href="../bootstrap/css/nprogress.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/program.css">
    <script src="../bootstrap/js/jquery/jquery.min.js"></script>
    <script>
        $(function () {
            var userId = $.cookie("userId");
            $.get("comment.do",{
                action:"videoComment",
                videoId:$("#videoId").val()
            },function (data) {
                console.log(data)
                li="";
                for (var i=0;i<data.length;i++){
                    li +='<li style="border: 1px solid black;padding: 10px;border-radius: 20px 20px 20px 20px">'+
                        '<div class="row" style="height: 20px;padding-left: 15px;margin-bottom: 10px;margin-top: 10px">'+
                        '<span >'+data[i].userName+'说:'+'</span>'+
                        '</div>'+
                    '<div class="row" style="height: 20px;padding-left: 30px;margin-bottom: 10px;margin-top: 10px">'+
                       '<span >'+data[i].comment+'</span>'+
                    '</div>'+
                '</li>';
                }

                $("#commentArea").html(li);
            })

            if (userId!=null){
                $.get("history.do",{
                    action:"insertHistory",
                    userId:userId,
                    videoId:$("#videoId").val()
                })
            }


            $("#btn_comment").click(function () {

                if (typeof(userId) == "undefined"){
                    alert("请先登录再评论")
                }else {
                    $.get("comment.do",{
                        action:"insertVideoComment",
                        userId:cookie,
                        videoId:$("#videoId").val(),
                        comment:$("#comment").val()
                    },function (data) {
                        if (data==1){
                            alert("评论成功")
                            location.reload();
                        }else {
                            alert("评论失败")
                        }
                    })
                }
            })
        })
    </script>
</head>
<style>
    .content .entry .thumb {
        margin-left: -3%;
        float: left;
    }
    
    .content .entry .test {
        margin-left: 2%;
        width: 80%;
        height: 200px;
        float: left;
        /* background-color: pink; */
    }
</style>
<style>
    #draw-border {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        background: #eee;
    }
    #draw-border1{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        background: #eee;
    }

    .four {
        border: 0;
        background: none;
        text-transform: uppercase;
        color: #4361ee;
        font-weight: bold;
        position: relative;
        outline: none;
        padding: 11px 15px;
        box-sizing: border-box;
    }

    .four::before, .four::after {
        box-sizing: inherit;
        position: absolute;
        content: '';
        border: 2px solid transparent;
        width: 0;
        height: 0;
    }

    .four::after {
        bottom: 0;
        right: 0;
    }

    .four::before {
        top: 0;
        left: 0;
    }

    .four:hover::before, .four:hover::after {
        width: 100%;
        height: 100%;
    }

    .four:hover::before {
        border-top-color: #4361ee;
        border-right-color: #4361ee;
        transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
    }

    .four:hover::after {
        border-bottom-color: #4361ee;
        border-left-color: #4361ee;
        transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
    }
</style>
<style>
    .header {
        top: 0 !important;
        padding: 0 !important;
    }
</style>

<body>
    <div class="wrapper">
        <jsp:include page="./leftSidebar.jsp"></jsp:include>
        <div class="aside">
            <div class="widgets">
                <h4>更多操作</h4>
                <ul class="body random">
                    <li style="">
                        <div id="draw-border1" style="width: 100px;display: inline-block">
                            <button class="four" id="like" style="width: 100px ;height: 38px;">点赞</button>
                        </div>
                        <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                        <div id="draw-border" style="width: 100px;display: inline-block">
                            <button class="four" id="collect" style="width: 100px ;height: 38px">收藏</button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="widgets">
                <h4>随机推荐</h4>
                <ul class="body random">
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《满溢的水果挞将于2020年10月播出。</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="../uploads/right1.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《EX-ARM》于2021年1月10日播出</p>
                            <p class="reading">阅读(906)</p>
                            <div class="pic">
                                <img src="uploads/right2.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">手游《Fate/Grand》配信5周年纪念动画PV公开</p>
                            <p class="reading">阅读(509)</p>
                            <div class="pic">
                                <img src="../uploads/right3.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">芳文社漫画改编动画《满溢的水果塔》追加声优</p>
                            <p class="reading">阅读(679)</p>
                            <div class="pic">
                                <img src="../uploads/right4.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《天使与龙的轮舞》将推出蓝光BOX。</p>
                            <p class="reading">阅读(889)</p>
                            <div class="pic">
                                <img src="../uploads/right5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
        <div class="content">
            <input type="hidden" id="videoId" value="<%
                  String videoId = request.getParameter("videoId");
                  if (videoId!=null){
                      out.print(videoId);
                  }
            %>">
<%--            ../uploads/点兔3.mp4--%>
            <video src="<% String videoUrl = request.getParameter("videoUrl");
                        if (videoUrl!=null){
                            out.print("/fantasy/videoUpload/"+videoUrl);
                        }else{
                            out.print("../uploads/点兔3.mp4");
                        }
                        %>" width="99%" height="510px" autoplay="autoplay" controls="controls" loop="loop"></video>
            <div class="input-group" style="margin-top: 10px;margin-bottom: 10px">
                <input id="comment" type="text" class="form-control" placeholder="输入评论内容...">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button" id="btn_comment">发送评论</button>
                </span>
            </div>

            <div class="panel new">
                <h3 style="margin-top:0 ">视频简介</h3>
                <div class="entry">
                    <a href="javascript:;" class="thumb">
                        <img src="<% String videoImg = request.getParameter("videoImg");
                        if (videoImg!=null){
                            out.print("/fantasy/videoUpload/"+videoImg);
                        }else{
                            out.print("../images/点兔.jpg");
                        }
                        %>" alt="">

                    </a>
                    <div class="test">
                        <h4>
                            <%
                                String name = request.getParameter("name");
                                if (name!=null){
                                    out.print(name);
                                }else{
                                    out.print("请问今天你要点兔子吗!");
                                }
                            %></h4>
                        <p class="info"> 960.8万播放量 &nbsp; &nbsp; 16.8万弹幕 &nbsp; &nbsp;&nbsp;253系列追番 </p>
                        <p class="home-link">番剧 &nbsp;已完结，全12话</p>
                        <p><%
                                String describe = request.getParameter("describe");
                                if (describe!=null){
                                    out.print(describe);
                                }else{
                                    out.print("心爱在木造房屋小镇度过的第二个夏天即将结束，季节即将变成各种盛大活动满载的秋季。 不论是在学校还是在Rabbit House，都有很多开心的事情！心爱、智乃以及大家都难以抑制对未来的期待……！");
                                }
                            %>
                        </p>
                        <p class="score">9.9 <span class="fen">分</span></p>

                        <p class="info1">1.3万人评分</p>
                    </div>

                </div>

            </div>

            <div class="panel new">
                <h3 style="margin-top: 0">评论</h3>
                <ul id="commentArea">

                </ul>
            </div>
        </div>
    </div>
<script src="../bootstrap/js/jquery/jquery.min.js"></script>
    <script src="../bootstrap/js/cookie.min.js"></script>
<script type="text/javascript">
    $(function () {
        //收藏
        $("#collect").click(function () {
            let userId = $.cookie("userId");
            let videoId = $("#videoId").prop('value');
            if (typeof userId=="undefined"){
                confirm("请先登录")
            }else if (videoId===null){
                confirm("当前作品暂时不支持收藏")
            }else{
                $.ajax({
                    url : './favorite.do',
                    data : {userId : userId,videoId:videoId,action:"insert"},
                    success : function (data) {
                        if (data==="1"){
                            confirm("收藏成功")
                        }else{
                            confirm("已经收藏过了")
                        }
                    }
                })
            }
        })
        //点赞按钮
        $("#like").click(function () {
            let userId = $.cookie("userId");
            let videoId = $("#videoId").prop('value');
            if (typeof userId!="undefined"){
                $.ajax({
                    url : './user.do',
                    data: {userId : userId,videoId:videoId,action:"like"},
                    success : function (data) {
                        console.log("data" + data)
                        if (data==="1"){
                            confirm("点赞成功")
                        }else{
                            confirm("已经为其点赞过了")
                        }
                    }
                })
            }else{
                confirm("请先登录")
            }
        })
    })
</script>
</body>
</html>